<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>考勤日历</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: #f5f6fa;
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .container {
            width: 360px;
            max-width: 95vw;
        }

        /* 月份切换 */
        .month-switch {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            padding: 10px 16px;
            border-bottom: 1px solid #eee;
            border-radius: 12px 12px 0 0;
        }

        .month-switch button {
            background: none;
            border: none;
            font-size: 18px;
            color: #008aff;
            cursor: pointer;
        }

        .month-switch span {
            font-size: 16px;
            font-weight: 500;
        }

        /* 日历 */
        .calendar {
            background: #fff;
            text-align: center;
            padding-bottom: 10px;
        }

        .calendar .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            border-bottom: 1px solid #eee;
            padding: 8px 0;
            color: #0099ff;
            font-weight: 500;
            font-size: 14px;
        }

        .calendar .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            padding: 10px 0;
            text-align: center;
        }

        .day {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            color: #444;
            cursor: pointer;
        }

        .day .circle {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-bottom: 4px;
        }

        .active { background: #0dc262; }
        .inactive { background: #e5e5e5; color: #999; }
        .color-pink { background: #e91e63; }
        .color-yellow { background: #fbc02d; }
        .color-orange { background: #ff9800; }
        .color-blue { background: #2196f3; }
        .color-cyan { background: #00bcd4; }
        .color-green { background: #009688; }
        .color-white { background: #fff; }

        .location {
            font-size: 12px;
            color: #777;
        }

        /* 统计 */
        .stats {
            margin-top: 10px;
            background: #fff;
            padding: 10px;
            font-size: 14px;
            border-radius: 0 0 12px 12px;
        }

        .stats h3 {
            font-size: 16px;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
        }

        .stat-item {
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 10px;
            text-align: center;
        }

        .stat-item .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border: 1px solid #E9ECF2;
            border-radius: 50%;
            margin-right: 4px;
        }

        /* 考勤详情卡片 */
        .record-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            padding: 16px 20px;
            margin-top: 15px;
            font-size: 14px;
        }

        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .record-header span {
            color: #333;
            font-weight: 600;
            font-size: 15px;
        }

        .status-tag {
            background: #4CAF50;
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 12px;
        }

        .record-item {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
        }

        .time {
            font-weight: 500;
            color: #666;
            margin-left: 6px;
        }

        .time.abnormal {
            color: #e74c3c;
            font-weight: 600;
        }

        .machine {
            color: #888;
            font-size: 13px;
            margin-left: 5px;
        }

        @media (max-width: 400px) {
            .day .circle { width: 36px; height: 36px; }
        }
    </style>
</head>

<body>
<div class="container">
    <div class="month-switch">
        <button id="prevMonth">◀</button>
        <span id="monthDisplay">2025年9月</span>
        <button id="nextMonth">▶</button>
    </div>

    <div class="calendar">
        <div class="weekdays">
            <div>周一</div><div>周二</div><div>周三</div><div>周四</div><div>周五</div><div>周六</div><div>周日</div>
        </div>
        <div class="days" id="daysContainer"></div>
    </div>

    <div class="stats">
        <h3>月统计</h3>
        <div class="stat-grid">
            <div class="stat-item"><span class="dot color-white"></span> 出勤 0</div>
            <div class="stat-item"><span class="dot color-green"></span> 全勤 0</div>
            <div class="stat-item"><span class="dot color-pink"></span> 缺勤 0</div>
            <div class="stat-item"><span class="dot color-yellow"></span> 迟到 0</div>
            <div class="stat-item"><span class="dot color-orange"></span> 早退 0</div>
            <div class="stat-item"><span class="dot color-orange"></span> 异常 0</div>
            <div class="stat-item"><span class="dot color-pink"></span> 旷工 0</div>
            <div class="stat-item"><span class="dot color-blue"></span> 请假 0</div>
            <div class="stat-item"><span class="dot color-cyan"></span> 打卡 0</div>
        </div>
    </div>

    <!-- 打卡详情卡片 -->
    <div class="record-card" id="recordCard">
        <div class="record-header">
            <span>点击日期查看详情</span>
            <div class="status-tag">--</div>
        </div>
    </div>
</div>

<script>
    const daysContainer = document.getElementById("daysContainer");
    const monthDisplay = document.getElementById("monthDisplay");
    const recordCard = document.getElementById("recordCard");

    const STATUS_COLOR = {
        present: "active",
        late: "color-yellow",
        early: "color-orange",
        leave: "color-blue",
        absent: "color-pink",
        weekend: "inactive"
    };

    const CITIES = ["武汉", "北京"];
    const attendanceData = {};

    function getRandomStatus(isWeekend) {
        if (isWeekend) return "weekend";
        const rand = Math.random();
        if (rand < 0.7) return "present";
        if (rand < 0.8) return "late";
        if (rand < 0.85) return "early";
        if (rand < 0.9) return "leave";
        return "absent";
    }

    function renderCalendar(year, month) {
        daysContainer.innerHTML = "";
        const firstDay = new Date(year, month - 1, 1);
        const startWeekday = (firstDay.getDay() + 6) % 7;
        const totalDays = new Date(year, month, 0).getDate();

        for (let i = 0; i < startWeekday; i++) {
            const blank = document.createElement("div");
            blank.className = "day";
            daysContainer.appendChild(blank);
        }

        for (let d = 1; d <= totalDays; d++) {
            const dayDiv = document.createElement("div");
            dayDiv.className = "day";

            const circle = document.createElement("div");
            circle.classList.add("circle");

            const dayOfWeek = (startWeekday + d - 1) % 7;
            const isWeekend = dayOfWeek >= 5;
            const status = getRandomStatus(isWeekend);
            const city = CITIES[Math.floor(Math.random() * CITIES.length)];
            circle.classList.add(STATUS_COLOR[status]);
            circle.textContent = d;

            const location = document.createElement("div");
            location.textContent = isWeekend ? "" : city;
            location.className = "location";

            dayDiv.appendChild(circle);
            dayDiv.appendChild(location);
            daysContainer.appendChild(dayDiv);

            attendanceData[`${year}-${month}-${d}`] = {
                date: `${year}年${month}月${d}日`,
                city,
                status,
                records: [
                    { type: "签到", time: "08:56", place: `【考勤机】${city}`, abnormal: false },
                    { type: "签退", time: status === "late" ? "⚠️ 18:42" : "18:10", place: `【考勤机】${city}`, abnormal: status === "late" }
                ]
            };

            dayDiv.addEventListener("click", () => renderRecord(attendanceData[`${year}-${month}-${d}`]));
        }
    }

    function renderRecord(info) {
        if (!info) return;
        const statusTextMap = {
            present: "全勤",
            late: "迟到",
            early: "早退",
            leave: "请假",
            absent: "缺勤",
            weekend: "休息"
        };
        const header = `
        <div class="record-header">
          <span>${info.date}</span>
          <div class="status-tag">${statusTextMap[info.status]}</div>
        </div>`;
        const records = info.records
            .map(
                r => `
          <div class="record-item">
            ${r.type}
            <span class="time ${r.abnormal ? "abnormal" : ""}">${r.time}</span>
            <span class="machine">${r.place}</span>
          </div>`
            )
            .join("");
        recordCard.innerHTML = header + records;
    }

    let currentYear = 2025;
    let currentMonth = 9;
    monthDisplay.textContent = `${currentYear}年${currentMonth}月`;
    renderCalendar(currentYear, currentMonth);

    document.getElementById("prevMonth").addEventListener("click", () => {
        currentMonth--;
        if (currentMonth === 0) {
            currentMonth = 12;
            currentYear--;
        }
        monthDisplay.textContent = `${currentYear}年${currentMonth}月`;
        renderCalendar(currentYear, currentMonth);
    });

    document.getElementById("nextMonth").addEventListener("click", () => {
        currentMonth++;
        if (currentMonth === 13) {
            currentMonth = 1;
            currentYear++;
        }
        monthDisplay.textContent = `${currentYear}年${currentMonth}月`;
        renderCalendar(currentYear, currentMonth);
    });
</script>
</body>
</html>
